<template>
    <div  v-if="currentPersonId==='-1'">
    </div>

    <div class="detail" v-else>
        <div class="head">
            <el-row>
                <el-col class="head-left" :span="12">
                    <div class="head-name">
                        <span>{{ currentPerson.name }}</span>
                    </div>
                    <div class="head-id">
                        <span>用户ID：{{ currentPersonId }}</span>
                    </div>
                    <div class="head-gender">
                        <i class="el-icon-male icon-gender" v-if="currentPerson.gender=='男'"></i>
                        <i class="el-icon-female icon-gender" v-else-if="currentPerson.gender=='女'"></i>
                    </div>
                </el-col>
                <el-col :span="12">
                    <img class="head-avatar" :src=currentPerson.avatar>
                </el-col>
            </el-row>
        </div>

        <div class="body">
            <div class="body-item">位置： {{ currentPerson.location }}</div>
            <div class="body-item">备注： {{ currentPerson.note }}</div>
        </div>
        <div class="footer">
            <div @click="handleChat">
                <i class="el-icon-lx-message icon"></i>
            </div>

            <div v-if="isLike" @click="handleLike">
                <i class="el-icon-lx-likefill icon"></i>
            </div>
            <div v-else @click="handleLike">
                <i class="el-icon-lx-like icon"></i>
            </div>
        </div>
    </div>
</template>

<script>
import {useStore} from "vuex";
import {computed, ref} from "vue";

export default {
    setup() {
        let store = useStore();
        let currentPersonId = computed(() => store.state.personId);
        let currentPerson = computed(() => store.state.person);

        //初始化收藏状态
        let isLike = computed(() => store.state.isLike);

        //修改收藏状态
        let handleLike = () => {
            store.state.isLike = !store.state.isLike;
            if (store.state.isLike) {
                store.commit('ADD_CONTACTS');
            } else {
                    store.commit('REMOVE_CONTACTS')
            }
        }
        let handleChat = () => {
            let session = store.state.sessions.find(session => session.id == currentPersonId.value);
            if (typeof (session) != "undefined") {
                store.commit('SELECT_SESSION', currentPersonId.value);
            } else {
                store.commit('ADD_SESSION', currentPersonId.value)
                store.commit('SELECT_SESSION',currentPersonId.value)
            }
        }
        return {
            currentPerson,
            currentPersonId,
            isLike,
            handleLike,
            handleChat,
        };
    }
}
</script>

<style scoped>

.detail {
    height: 280px;
    width: 300px;
    padding: 10px 15px;
    margin: 15px auto;
    background-color: white;
    border: solid 1px lightskyblue;
}

.head {
    padding: 10px 50px;
    border-bottom: 1px solid #97a8be;
}

.head-name {
    padding-top: 20px;
    font-size: 20px;
    font-weight: bold;
}

.head-id {
    padding-top: 10px;
    font-size: 15px;
    color: darkgray;
}

.head-gender {
    padding-top: 10px;
}

icon-gender {
    font-size: 15px;
}

.head-avatar {
    height: 100px;
    width: 100px;
}

.body {
    padding: 10px 50px;
}

.body-item {
    padding-top: 5px;
    padding-bottom: 5px;
}

.footer {
    padding: 10px 100px;
    display: flex;
    justify-content: space-between;
}

.icon {
    font-size: 25px;
    color: #97a8be;
}
</style>